<template>
    <div id="wai">
        <div id="nei">
            <h1 class="title">{{ msg }}</h1><button class="change_news" @click="change_news">{{ change_but_text
            }}</button><br /><br />
            <div class="form_news">
                <label>省份：<input v-model="address.province" :style="styleObject" type="text" :readonly="isReadOnly"
                        placeholder="输入省份"></label><br>
                <label>详细地址：<input v-model="address.detailed_address" :style="styleObject" type="text"
                        :readonly="isReadOnly" placeholder="收件地址"></label><br>
                <label>电话号码：<input v-model="address.phone_number" :style="styleObject" type="text" :readonly="isReadOnly"
                        placeholder="电话号码"></label><br>
                <button class="but" :disabled="isReadOnly" @click="refer_to">提交</button>
                <button class="but" :disabled="isReadOnly" @click="reset">重置</button>
                <button class="but" :disabled="isReadOnly" @click="delete_address">删除地址</button>
                <button class="but" @click="isDefault">设为默认地址</button>
            </div>
        </div>

    </div>
</template>
                  
<script>


export default {
    data() {
        return {
            // msg: this.$route.params.id,
            msg: '修改地址',
            change_but_text: '修改',
            styleObject: {
                'background-color': 'rgba(156, 156, 156, 0.558)'
            },
            isReadOnly: true,
            address: {
                province: this.$route.params.news.province,
                detailed_address: this.$route.params.news.detailed_address,
                phone_number: this.$route.params.news.phone_number,
                session_id: this.$auth.getAuthorization(),
                address_id: this.$route.params.id
            }
        }
    },
    methods: {
        refer_to() {
            this.$http.post('change_address.php', { 'data': this.address },
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {
                        alert(response.data.message);
                        this.$router.push('/user/shipping_address');
                        // console.log(response);
                    } else {
                        alert(response.data.message);
                        // console.log(response);
                    }
                    // this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        reset() {
            this.address = {
                province: '',
                detailed_address: '',
                phone_number: '',
                session_id: this.$auth.getAuthorization(),
                address_id: this.$route.params.id
            }
        },
        isDefault() {
            this.$http.post('set_default_address.php', { 'session_id':this.$auth.getAuthorization(),'address_id': this.$route.params.id},
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {
                        alert(response.data.message);
                        this.$router.push('/user/shipping_address');
                        // console.log(response);
                    } else {
                        alert(response.data.message);
                        // console.log(response);
                    }
                    // this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        delete_address(){
            this.$http.post('delete_address.php', { 'session_id':this.$auth.getAuthorization(),'address_id': this.$route.params.id},
                {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    }
                }).then(response => {
                    if (response.data.status === 1) {
                        alert(response.data.message);
                        this.$router.push('/user/shipping_address');
                        // console.log(response);
                    } else {
                        alert(response.data.message);
                        // console.log(response);
                    }
                    // this.address = response.data.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        change_news() {
            this.isReadOnly = !this.isReadOnly;
            this.change_but_text = this.isReadOnly ? '修改' : '不修改';
            this.styleObject['background-color'] = this.isReadOnly ? 'rgba(156, 156, 156, 0.558)' : 'white';

        }
    },
    created() { }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;

}

#wai {
    #nei {
        .title {
            font-size: 50px;
            margin-top: 2%;
            float: left;
        }

        .change_news {
            width: 150px;
            height: 50px;
            float: right;
            font-size: 30px;
            // margin-left: 80%;
        }

        .form_news {
            margin-top: 5%;
            font-size: 30px;

            input {
                margin-top: 1%;
            }

            .but {
                width: 150px;
                height: 50px;
                margin-left: 20%;
                margin-top: 3%;
            }
        }
    }
}
</style>
                                                                          